<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '91%'}"
                 @scroll="scroll(false)">
      <!-- 医生评价 -->
      <!-- <div class="title">请对医生做出评价</div> -->
      <ul class="starlist clearfix">
        <li class="eva-item clearfix eva-itemone">
          <div class="left">手术效果</div>
          <div class="right">
            <img :src="effect_star>=1?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_effect_star(1)">
            <img :src="effect_star>=2?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_effect_star(2)">
            <img :src="effect_star>=3?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_effect_star(3)">
            <img :src="effect_star>=4?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_effect_star(4)">
            <img :src="effect_star>=5?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_effect_star(5)">
          </div>
        </li>
        <li class="eva-item clearfix">
          <div class="left">医院环境</div>
          <div class="right">
            <img :src="hospital_star>=1?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_hospital_star(1)">
            <img :src="hospital_star>=2?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_hospital_star(2)">
            <img :src="hospital_star>=3?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_hospital_star(3)">
            <img :src="hospital_star>=4?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_hospital_star(4)">
            <img :src="hospital_star>=5?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_hospital_star(5)">
          </div>
        </li>
        <li class="eva-item clearfix">
          <div class="left">管家服务</div>
          <div class="right">
            <img :src="serve_star>=1?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_serve_star(1)">
            <img :src="serve_star>=2?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_serve_star(2)">
            <img :src="serve_star>=3?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_serve_star(3)">
            <img :src="serve_star>=4?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_serve_star(4)">
            <img :src="serve_star>=5?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_star_s@2x.png':'https://h5.ameimeika.com/mp_images/star/pingxing-hui@2x.png'"
                 alt
                 class="little_star"
                 @tap="tap_serve_star(5)">
          </div>
        </li>
      </ul>
      <div class="evaluat"
           v-if="mark == false">
        <div class="content">
          <textarea v-if="showarea_doc"
                    @input="changedoc()"
                    v-model="doc_content"
                    maxlength="255"
                    :fixed="true"
                    class="textarea ppp"
                    :adjust-position="true"
                    auto-focus></textarea>
          <div class="textarea box_t"
               v-if="!showarea_doc"
               @tap="clickDoc(true)">{{doc_content == ''?'':doc_content}}</div>
          <span class="tip1"
                v-if="doc_content==''"
                @tap="clickDoc(true)">{{doc_content==''?'您的评价能帮助其他人哦～':doc_content}}</span>
          <!-- <div class="tip">剩余{{doc_max}}字</div> -->
        </div>
      </div>
      <!-- 展示评论 -->
      <!-- <div class="showbox" v-if="mark==true && doctext!==''">
        <scroll-view scroll-y="true" @scroll="scrollbox" class="scroll">
          {{dataList.doctor_comment.contents}}
          {{doctext}}
        </scroll-view>
      </div> -->
      <!-- 上传照片 -->
      <picupload :picture_num="9"
                 v-on:getmsg="hasmsg"
                 v-if="!mark"></picupload>
      <!-- <div class="ul clearfix" v-if="mark && image_arr[0]!==''">
        <li class="item clearfix" v-for="(item,index) in image_arr" :key="index">
          <img :src="imgUrl+item" alt class="img clearfix">
        </li>
      </div> -->
      <div class="hiddenName"
           @click="hiddenName">
        <img :src="imgmark?'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_check_s@2x.png':'https://img.ameimeika.com/h5_images/mp_images/mp_2.9/ic_check_n@2x.png'"
             alt
             class="img">
        匿名发布
      </div>
    </scroll-view>
    <div class="sub-btn"
         @tap="sub_eva()"
         v-if="!mark">发布</div>
    <!-- <div class="bottom">
      <div class="btn"
           @click="delSubsidy(subsidy_id)"
           v-if="mark">删除</div>
    </div>-->
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
import picupload from "@/components/pic_upload1/pic_upload";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      effect_star: 5, //手术效果
      hospital_star: 5, //医院环境
      serve_star: 5, //管家服务
      doc_content: "", //医生输入框内容
      doc_max: 200,
      image_arr: [],
      baseUrl: common.image_response,
      project_id: "",
      autoFocus: false,
      showarea_doc: true,
      mark: false, //如果是展示页，此标记为true
      dataList: "",
      doctext: "",
      comment_id: "",
      imgmark: false,
      is_anonymous: 0, //默认不匿名
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "评价"
    });
    Object.assign(this.$data, this.$options.data());
    options.status = 0;
    if (options.id) {
      this.project_id = options.id;
    }

  },
  components: {
    picupload
  },
  methods: {
    // 上传照片
    hasmsg (msg) {
      this.image_arr = "";
      this.image_arr = msg;
    },
    tap_effect_star (e) {
      //效果
      this.effect_star = e;
    },
    tap_hospital_star (e) {
      //
      this.hospital_star = e;
    },
    tap_serve_star (e) {
      //服务
      this.serve_star = e;
    },
    //提交评价
    sub_eva () {
      if (this.doc_content.trim() == "") {
        wx.showToast({
          title: "请至少填写一条评价内容", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
      } else if (200 - this.doc_max < 15) {
        wx.showToast({
          title: "评论内容不能少于15字", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      } else {
        wx.showLoading({
          title: "提交中...", //提示的内容,
          mask: true //显示透明蒙层，防止触摸穿透,
        });
        common.fly_post(
          "/api/v4_2/project/order/comment",
          {
            id: this.project_id,
            effect_star: this.effect_star,
            serve_star: this.serve_star,
            hospital_star: this.hospital_star,
            images: this.image_arr.join(","),
            contents: this.doc_content,
            is_anonymous: this.is_anonymous
          },
          result => {
            wx.hideLoading();
            let res = result.data;
            if (res.status_code == 0) {
              wx.showToast({
                title: "评价成功", //提示的内容,
                icon: "success", //图标,
                duration: 2000, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {
                  setTimeout(() => {
                    //跳转到项目订单详情
                    wx.redirectTo({
                      url: "/pages/package_mine/project_order_detail/main?order_id=" + this.project_id
                    });
                  }, 1500);
                }
              });
            } else {
              wx.showToast({
                title: res.message,
                icon: "none",
                duration: 2000,
                mask: false
              });
            }
          }
        );
      }
    },
    // 医生
    changedoc (status) {
      this.doc_max = 200 - this.doc_content.length;
    },
    doc_blur (e) {
      this.showarea_doc = e;
    },
    clickDoc (e) {
      this.showarea_doc = e;
    },

    scroll (status) {
      this.showarea_doc = status;
    },
    delSubsidy (e) {
      wx.showModal({
        title: "", //提示的标题,
        content: "确认删除评价吗",
        success: res => {
          if (res.confirm) {
            common.mmk_Loading(0);
            common.fly_post(
              "api/v4_2/order_project/comment_del",
              {
                comment_id: this.comment_id
              },
              result => {
                common.mmk_Loading(1);
                let res = result.data;
                if (res.status_code == 0) {
                  wx.showToast({
                    title: "删除成功", //提示的内容,
                    icon: "success", //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {
                      wx.navigateBack({
                        delta: 1
                      });
                    }
                  });
                } else {
                  common.mmk_Loading(1);
                  common.mmk_Loading(2, res.message);
                }
              }
            );
          } else if (res.cancel) {
          }
        }
      });
    },
    hiddenName () {
      this.imgmark = !this.imgmark;
      if (this.imgmark) { //匿名
        this.is_anonymous = 1
      } else {
        this.is_anonymous = 0
      }
    },
    scrollbox (e) { }
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  // overflow: auto;
  background: #f3f4f6;
  padding-bottom: 60px;
  position: relative;
  .title {
    width: 100%;
    padding-left: 15px;
    line-height: 38px;
    font-size: 12px;
    font-family: "Medium";
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
  }
  .starlist {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    // box-shadow: 0px 1px 0px 0px rgba(204, 204, 204, 0.5);
    padding-bottom: 15px;
    // border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
    .eva-item {
      padding: 0 15px;
      box-sizing: border-box;
      line-height: 20px;
      margin-top: 20px;
      &.eva-itemone {
        margin-top: 15px;
      }
      .left {
        float: left;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: #333;
      }
      .right {
        height: 100%;
        float: right;
        .little_star {
          width: 20px;
          height: 20px;
          display: block;
          float: left;
          margin-right: 10px;
        }
      }
    }
  }
  .evaluat {
    height: 135px;
    background: rgba(255, 255, 255, 1);
    .header {
      line-height: 44px;
      padding-left: 15px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
    .content {
      width: 100%;
      height: 135px;
      background: #fff;
      margin: 0 auto;
      position: relative;
      .textarea {
        width: 100%;
        height: 100%;
        background: #fff;
        display: block;
        padding: 8px 10px;
        font-size: 14px;
        box-sizing: border-box;
      }
      .tip {
        font-size: 10px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        position: absolute;
        bottom: 8px;
        right: 8px;
      }
      .tip1 {
        width: 325px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 20px;
        position: absolute;
        top: 10px;
        left: 10px;
      }
    }
  }
  .showbox {
    width: 375px;
    height: 90px;
    box-sizing: border-box;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;
    overflow: hidden;
    .scroll {
      height: 100%;
    }
  }
}
.hiddenName {
  width: 100%;
  height: 48px;
  font-size: 14px;
  color: rgba(153, 153, 153, 1);
  text-align: right;
  box-sizing: border-box;
  padding: 0 15px;
  background-color: #fff;
  line-height: 48px;
  position: relative;
  &.hiddenName::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 92%;
    background-color: #f3f4f6;
    top: 0;
    left: 4%;
  }
  .img {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    top: 32%;
    right: 80px;
  }
}
.sub-btn {
  width: 100%;
  height: 50px;
  background: #ff383e;
  font-size: 17px;
  font-family: "Medium";
  font-weight: 500;
  line-height: 50px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.ul {
  width: 100%;
  padding: 15px 5px 15px 15px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 74px;
  .item {
    float: left;
    width: 106px;
    height: 106px;
    margin-right: 3.477%;
    margin-bottom: 10px;
    .img {
      width: 106px;
      height: 106px;
      display: inline-block;
    }
  }
}
.bottom {
  width: 100%;
  height: 49px;
  background-color: #fff;
  box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.07);
  position: absolute;
  bottom: 9%;
  left: 0;
  .btn {
    width: 70px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid rgba(102, 102, 102, 1);
    font-size: 12px;
    color: #666;
    line-height: 30px;
    text-align: center;
    float: right;
    margin: 8px 15px 0 0;
  }
}
</style>



